<template>
  <div class="thread-wrapper">
    <div class="thread-head">
      <div class="head-a-wrapper">
        <a href="javascript:void(0)">看帖</a>
        <a href="javascript:void(0)">热门推荐</a>
        <a href="javascript:void(0)">精品</a>
      </div>
      <div class="head-form-input">
        <input class="input-text" type="text" placeholder="请输入搜索内容" v-model="params.content">
      </div>
    </div>
    <f-thread :group="params.threadGroup" ref="thread"></f-thread>
    <div class="thread-reply">
      <f-thread-reply></f-thread-reply>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import fThread from '../directive/fThread.vue'
  import fThreadReply from '../directive/fThreadReply.vue'
  export default {
    data () {
      return {
        params: {
          content: '',
          threadGroup: this.$route.params.type
        }
      }
    },
    components: {
      fThread,
      fThreadReply
    },
    watch: {
      /* params: { // 监控整个对象的变化
       handler (newValue, oldValue) {
       console.log(newValue.content, oldValue.content)
       },
       deep: true
       } */
      'params.content' (newValue, oldValue) { // 监控个体变化
        newValue = newValue.trim()
        oldValue = oldValue.trim()
        if (newValue !== oldValue) {
          this.$refs.thread.callBack(this.params.content)
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "thread.styl";
</style>
